<template>
  <div class="container" style="overflow-y:scroll;">
    <el-row>
      <el-col :span="12" >
        <el-card>
          <div slot="header"><span>CPU</span> <a href="javascript:location.reload();"><i class="el-icon-refresh"></i>
			  <span>刷新</span></a></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table style="width: 100%;">
              <thead>
                <tr>
                  <th class="is-leaf"><div >属性</div></th>
                  <th class="is-leaf"><div >值</div></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><div >核心数</div></td>
                  <td><div  v-if="server.cpuNum">{{ server.cpuNum }}</div></td>
                </tr>
                <tr>
                  <td><div >cpu使用率</div></td>
                  <td><div  v-if="server.cpuUsed">{{ server.cpuUsed }}%</div></td>
                </tr>
                <tr>
                  <td><div >Load Avg 5</div></td>
                  <td><div  v-if="server.cpuAvg5">{{ server.cpuAvg5 }}%</div></td>
                </tr>
                <tr>
                  <td><div >Load Avg 15</div></td>
                  <td><div  v-if="server.cpuAvg15">{{ server.cpuAvg15 }}%</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" >
        <el-card>
          <div slot="header"><span>内存</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
                <tr>
                  <th class="is-leaf"><div >属性</div></th>
                  <th class="is-leaf"><div >服务器内存</div></th>
                  <th class="is-leaf"><div >本系统使用内存</div></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><div >总内存</div></td>
                  <td><div  v-if="server.memTotal">{{ memorySizeFormat(server.memTotal) }}</div></td>
                  <td><div  v-if="server.goTotal">{{ memorySizeFormat(server.goTotal) }}</div></td>
                </tr>
                <tr>
                  <td><div >已用内存</div></td>
                  <td><div  v-if="server.memUsed">{{ memorySizeFormat(server.memUsed)}}</div></td>
                  <td><div  v-if="server.goUsed">{{ memorySizeFormat(server.goUsed)}}</div></td>
                </tr>
                <tr>
                  <td><div >剩余内存</div></td>
                  <td><div  v-if="server.memFree">{{ memorySizeFormat(server.memFree) }}</div></td>
                  <td><div  v-if="server.goFree">{{ memorySizeFormat(server.goFree) }}</div></td>
                </tr>
                <tr>
                  <td><div >使用率</div></td>
                  <td><div  v-if="server.memUsage" :class="{'text-danger': server.memUsage > 80}">{{ server.memUsage }}%</div></td>
                  <td><div  v-if="server.jvm" :class="{'text-danger': server.goUsage > 80}">{{ server.goUsage }}%</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" >
        <el-card>
          <div slot="header">
            <span>服务器信息</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table  style="width: 100%;">
              <tbody>
                <tr>
                  <td><div >服务器名称</div></td>
                  <td><div  v-if="server.sysComputerName">{{ server.sysComputerName }}</div></td>
                  <td><div >操作系统</div></td>
                  <td><div  v-if="server.sysOsName">{{ server.sysOsName }}</div></td>
                </tr>
                <tr>
                  <td><div >服务器IP</div></td>
                  <td><div  v-if="server.sysComputerIp">{{ server.sysComputerIp }}</div></td>
                  <td><div >系统架构</div></td>
                  <td><div  v-if="server.sysOsArch">{{ server.sysOsArch }}</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

     <el-col :span="24" >
        <el-card>
          <div slot="header">
            <span>GO信息</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <tbody>

                <tr>
                  <td><div >语言环境</div></td>
                  <td><div  v-if="server.goName">{{ server.goName }}</div></td>
                  <td><div >启动时间</div></td>
                  <td><div  v-if="server.goStartTime">{{ server.goStartTime }}</div></td>
                </tr>

                <tr>
                  <td><div >安装路径</div></td>
                  <td><div  v-if="server.goHome">{{ server.goHome }}</div></td>
                  <td><div >项目路径</div></td>
                  <td><div  v-if="server.goUserDir">{{ server.goUserDir }}</div></td>
                </tr>


                <tr>
                  <td><div >版本</div></td>
                  <td><div  v-if="server.goVersion">{{ server.goVersion }}</div></td>
                  <td><div >运行时长</div></td>
                  <td><div  v-if="server.goRunTime">{{ timeFormat(server.goRunTime) }}</div></td>
                </tr>

              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" >
        <el-card>
          <div slot="header">
            <span>磁盘状态</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
                <tr>
                  <th class="is-leaf"><div >盘符路径</div></th>
                  <th class="is-leaf"><div >文件系统</div></th>
                  <th class="is-leaf"><div >总大小</div></th>

                  <th class="is-leaf"><div >可用大小</div></th>
                  <th class="is-leaf"><div >已用大小</div></th>
                  <th class="is-leaf"><div >已用百分比</div></th>
                </tr>
              </thead>
              <tbody v-if="server.diskList">
                <tr v-for="(sysFile,index) in server.diskList" :key="index">
                  <td><div >{{ sysFile.path }}</div></td>
                  <td><div >{{ sysFile.fstype }}</div></td>
                  <td><div >{{ memorySizeFormat(sysFile.total) }}</div></td>

                  <td><div >{{ memorySizeFormat(sysFile.free) }}</div></td>
                  <td><div >{{ memorySizeFormat(sysFile.used) }}</div></td>
                  <td><div  :class="{'text-danger': sysFile.usedPercent > 80}">{{ sysFile.usedPercent }}%</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import {inject,onUnmounted,ref} from "vue";
import Table from "/$/demo/components/crud/table.vue";
export default{
  	name: "monitor",
	components: {Table},
	setup(){
		const service = inject<any>("service");
		let server = ref({});
		service.monitor.monInfo.info().then(res => {
			server.value = res;
		});
		const runTag=setInterval(()=>{
			service.monitor.monInfo.info().then(res => {
				server.value = res;
			});
		},5000)
		onUnmounted(()=>{
			clearInterval(runTag)
		})
		function memorySizeFormat(size:any){
			size  = parseFloat(size);
			let rank =0;
			let rankchar ='Bytes';
			while(size>1024&&rankchar!='GB'){
				size = size/1024;
				rank++;
				if(rank==1){
					rankchar="KB";
				}
				else if(rank==2){
					rankchar="MB";
				}
				else if(rank==3){
					rankchar="GB";
				}
			}
			return size.toFixed(2)+ " "+ rankchar;
		}
		function timeFormat(second:any){
			second = parseFloat(second)
			let rank = 0
			let rankchar = '秒'
			while(second>60&&rankchar!='小时'){
				second = second/60;
				rank++
				if(rank==1){
					rankchar = '分'
				}else if(rank==2){
					rankchar='小时'
				}
			}
			return second.toFixed(2)+" "+rankchar
		}
		return {
			server,
			memorySizeFormat,
			timeFormat
		};
	}
  }
</script>
<style type="scss">
table{font-size: 12px;}
tr,td{
	padding:5px; line-height:1;margin:0;
}
.el-card__body{
	padding: 5px!important;
}
</style>
